<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>模拟history路由功能</title>
</head>
<body>
<ul>
	<li><a href="/">我是主页</a></li>
	<li><a href="/a">我是a页面</a></li>
	<li><a href="/b">我是b页面</a></li>
</ul>
<div id="container"></div>
<script type="text/javascript">
const ul = document.querySelector('ul');
let dom = document.getElementById('container');

// 设置默认的路径跳转
history.replaceState(null, null, location.pathname);
ul.addEventListener('click', e => {
	console.log(e.target);
	if (e.target.tagName === 'A') {
		e.preventDefault();//阻止默认行为,防止跳转
		let path = e.target.getAttribute('href');
		history.pushState(null, null, '/06router/history01.html' + path);
		dom.innerHTML = path;
	}
});
</script>
</body>
</html>